<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title></title>


    <link rel="icon" href="img/icon.png" type="image/x-icon"/>

    <!-- layui -->
    <link type="text/css" rel="stylesheet" href="layui/css/layui.css"/>

    <!-- Google font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">

    <!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>

    <!-- Slick -->
    <link type="text/css" rel="stylesheet" href="css/slick.css"/>
    <link type="text/css" rel="stylesheet" href="css/slick-theme.css"/>

    <!-- nouislider -->
    <link type="text/css" rel="stylesheet" href="css/nouislider.min.css"/>

    <!-- Font Awesome Icon -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Custom stlylesheet -->
    <link type="text/css" rel="stylesheet" href="css/style.css"/>


    <!-- Custom stlylesheet -->
    <link type="text/css" rel="stylesheet" href="css/common.css"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
<!-- HEADER -->
<header>
    <!-- TOP HEADER -->
    <div id="top-header">
        <div class="container">
            <ul class="header-links pull-left">
                <li><a href="#"><i class="fa fa-phone"></i><span></span></a></li>
                <li><a href="#"><i class="fa fa-envelope-o"></i> <span></span></a></li>
                <li><a href="#"><i class="fa fa-map-marker"></i> <span></span></a></li>
            </ul>
            <!--<ul class="header-links pull-right">
                <li><a href="#"><i class="fa fa-dollar"></i> USD</a></li>
                <li><a href="#"><i class="fa fa-user-o"></i> My Account</a></li>
            </ul>-->
        </div>
    </div>
    <!-- /TOP HEADER -->

    <!-- MAIN HEADER -->
    <div id="header">
        <!-- container -->
        <div class="container">
            <!-- row -->
            <div class="row">
                <!-- LOGO -->
                <div class="col-md-3">
                    <div class="header-logo">
                        <a href="#" class="logo">
                            <img src="./img/logo.png" alt="">
                        </a>
                    </div>
                </div>
                <!-- /LOGO -->
                <div class="col-md-9">
                    <span class="layui-badge-dot"></span>
                    <span class="layui-badge-dot layui-bg-orange"></span>
                    <span class="layui-badge-dot layui-bg-green"></span>
                    <span class="layui-badge-dot layui-bg-cyan"></span>
                    <span class="layui-badge-dot layui-bg-blue"></span>
                    <span class="layui-badge-dot layui-bg-black"></span>
                    <span class="layui-badge-dot layui-bg-gray"></span>

                </div>

            </div>
            <!-- row -->
        </div>
        <!-- container -->
    </div>
    <!-- /MAIN HEADER -->
</header>
<!-- /HEADER -->


<!-- SECTION -->
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">

            <!-- section title -->
            <div class="col-md-12">
                <div class="section-title">

                    <h3 class="title">
                        <span>商品列表</span>
                        <br>
                        <span style="font-size: 12px;">Product List</span>
                    </h3>

                </div>
                <div class="section-nav">
                    <ul class="layui-nav" lay-filter="" style="background-color: #15161D;">
                        <li class="layui-nav-item"><a href="index.html">首页</a></li>
                        <li class="layui-nav-item layui-this">
                            <a href="javascript:;">产品列表</a>
                            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                                <dd><a href="">男装</a></dd>
                                <dd><a href="">女装</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="javascript:;">男士专区</a>
                            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                                <dd><a href="">上衣</a></dd>
                                <dd><a href="">裤子</a></dd>
                                <dd><a href="">整套</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <a href="">小姐姐专区</a>
                            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                                <dd><a href="">最火</a></dd>
                                <dd><a href="">销量TOP10</a></dd>
                                <dd><a href="">评价最高</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <div class="layui-form component"
                                 lay-filter="LAY-site-header-component" style="margin-left: 100px;">
                                <div class="layui-form-select">
                                    <div class="layui-select-title">
                                        <input type="text"
                                               style="color: black;"
                                               placeholder="搜索商品"
                                               value=""
                                               class="layui-input">

                                        <i class="layui-icon layui-icon-search"
                                           style="position:absolute;right: 10px;top: -5px;margin-top: -3px;color: black;"></i>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /section title -->

            <!-- Products tab & slick -->
            <div class="col-md-12">
                <div class="row">
                    <div class="products-tabs">
                        <!-- tab -->
                        <div id="tab1" class="tab-pane active" style="padding-left: 5em;">
                            <div class="products-slick" data-nav="#slick-nav-1" id="productListNew">
                            </div>
                           <!-- <div id="slick-nav-1" class="products-slick-nav"></div>-->
                        </div>
                        <!-- /tab -->
                    </div>
                </div>
                <div class="row align-center">
                    <div id="page">

                    </div>
                </div>
            </div>
            <!-- Products tab & slick -->
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>
<!-- /SECTION -->


<!-- FOOTER -->
<footer id="footer">
    <!-- top footer -->
    <div class="section">
        <!-- container -->
        <div class="container">
            <!-- row -->
            <div class="row">
                <div class="col-md-3 col-xs-6">
                    <div class="footer">
                        <h3 class="footer-title">初衷</h3>
                        <ul class="layui-timeline">
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">今天</h3>
                                    <p>
                                        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                                        <br>理想不倒、来日方长
                                    </p>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">11月15日</h3>
                                    <p>
                                        中国人民抗日战争胜利73周年
                                        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                                        <br>铭记、感恩
                                        <br>所有为中华民族浴血奋战的英雄将士
                                        <br>永垂不朽
                                    </p>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">过去</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-md-3 col-xs-6">
                    <div class="footer">
                        <h3 class="footer-title">联系方式</h3>
                        <ul class="footer-links" id="about">
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                            <li><a href="#"></a></li>
                        </ul>
                    </div>
                </div>

                <div class="clearfix visible-xs"></div>

                <div class="col-md-3 col-xs-6">
                    <div class="footer">
                        <h3 class="footer-title">友情链接</h3>
                        <ul class="footer-links">
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Terms & Conditions</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-md-3 col-xs-6">
                    <div class="footer">
                        <h3 class="footer-title">服务</h3>
                        <ul class="footer-links">
                            <li><a href="#">My Account</a></li>
                            <li><a href="#">View Cart</a></li>
                            <li><a href="#">Wishlist</a></li>
                            <li><a href="#">Track My Order</a></li>
                            <li><a href="#">Help</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /row -->
        </div>
        <!-- /container -->
    </div>
    <!-- /top footer -->

    <!-- bottom footer -->
    <div id="bottom-footer" class="section">
        <div class="container">
            <!-- row -->
            <div class="row">
                <div class="col-md-12 text-center">
                    <ul class="footer-payments">
                        <li><a href="#"><i class="fa fa-cc-visa"></i></a></li>
                        <li><a href="#"><i class="fa fa-credit-card"></i></a></li>
                        <li><a href="#"><i class="fa fa-cc-paypal"></i></a></li>
                        <li><a href="#"><i class="fa fa-cc-mastercard"></i></a></li>
                        <li><a href="#"><i class="fa fa-cc-discover"></i></a></li>
                        <li><a href="#"><i class="fa fa-cc-amex"></i></a></li>
                    </ul>
                    <span class="copyright">
						Copyright &copy;<script>document.write(new Date().getFullYear());</script>
					</span>
                </div>
            </div>
            <!-- /row -->
        </div>
        <!-- /container -->
    </div>
    <!-- /bottom footer -->
</footer>
<!-- /FOOTER -->


<script type="text/html" id="productNew">
    {{# layui.each(d.list[0],function(index,item){}}

    <div class="product slick-slide slick-active" style="width: 20%;" layer-href>
        <div class="product-img">
            <img src="{{item.picUrl}}" alt="{{item.productName}}">
            <div class="product-label">
                <span class="sale">折扣</span>
                <span class="new">NEW</span>
            </div>
        </div>
        <div class="product-body">
            <p class="product-category">{{item.productClassId == '1' ? '上装' : '下装'}}</p>
            <h3 class="product-name"><a href="#">{{item.productName}}</a></h3>
            <h4 class="product-price">￥{{item.zkFinalPrice == undefined ? '??': item.zkFinalPrice}}
                <del class="product-old-price">￥{{item.reservePrice== undefined ? '??': item.reservePrice}}</del>
            </h4>
            <div class="product-rating">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
            </div>
        </div>
        <div class="add-to-cart">
            <button class="add-to-cart-btn"><i class="fa fa-shopping-cart"></i>
                <a href="{{item.productUrl}}" target="_blank">前往购买</a>
            </button>
        </div>
    </div>
    {{# });}}

</script>

<!-- jQuery Plugins -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/nouislider.min.js"></script>
<script src="js/jquery.zoom.min.js"></script>

<script src="layui/layui.js"></script>
<script src="controller/common.js"></script>
<script src="controller/indexMore.js"></script>
<script src="js/main.js"></script>
</body>
</html>
